<template>
  <div id="information">
    <div class="wrap">
      <ul class="content">
        <li class="item"
            v-for="item in 15">
          <div class="infofrom"
               @click="view(12)">张三在XXX演练课程中回复了你</div>
          <div class="infodetail">
            <Icon type="md-time" />
            <span class="time">
              2017/10/7 23:28:26
            </span>
            <Tag>标为已读</Tag>
          </div>
        </li>
      </ul>
    </div>
    <informationReplay v-if="informationReplayVisible"
                       ref="informationReplay"></informationReplay>
  </div>
</template>
<script>
import informationReplay from './information-replay'
export default {
  data () {
    return {
      content: '',
      informationReplayVisible: false
    }
  },
  methods: {
    view (id) {
      this.informationReplayVisible = true
      this.$nextTick(() => {
        this.$refs.informationReplay.init(id)
      })
    },
    handleChange (html, text) {
    }
  },
  components: {
    informationReplay
  }
}
</script>

<style lang="scss">
#information {
  width: 100%;
  .wrap {
    .content {
      .item {
        display: flex;
        justify-content: space-between;
        height: 40px;
        line-height: 40px;
        font-size: 0;
        border-bottom: 1px solid #dcdee2;
        .infofrom {
          height: 100%;
          font-size: 14px;
          cursor: pointer;
        }
        .infodetail {
          height: 100%;
          .ivu-icon {
            font-size: 14px;
            vertical-align: middle;
          }
          .time {
            font-size: 14px;
            margin-right: 10px;
            vertical-align: middle;
          }
          .ivu-tag {
            vertical-align: middle;
          }
        }
      }
    }
  }
}
</style>

